<div class="wrapper">
    <div class="examples_body">
        <ul class="bannerHolder">
            <?php foreach(HResponse::getAttribute('rec_list') as $key => $item) { ?>
            <li>
                <div class="picbox2">
                    <a href="<?php echo HResponse::url('cate', 'parent_id=' . $item['id']); ?>" target="_blank">
                        <img alt="<?php echo $item['name']; ?>" src="<?php echo HResponse::touri($item['image_path']);?>" />
                    </a>
                    <p class="companyInfo"><?php echo $item['name']; ?></p>
                    <div class="cornerTL"></div>
                    <div class="cornerTR"></div>
                    <div class="cornerBL"></div>
                    <div class="cornerBR"></div>
                </div>
            </li>
            <?php } ?>
        </ul>
    </div>
    <script>
        $(document).ready(function(){
            // 0.4代表遮罩的透明度
            $('.picbox2 div').css('opacity',0.2);
            $('.picbox2').hover(function(){
                var el = $(this);
                // 先淡出阴影，后淡入文字
                el.find('div').stop().animate({width:1200,height:1200},'slow',function(){
                    el.find('p').fadeIn('fast');
                });
            },function(){
                var el = $(this);
                // 隐藏文字
                el.find('p').stop(true,true).hide();
                // 去掉遮罩
                el.find('div').stop().animate({width:300,height:300},'fast');
            }).click(function(){
                // 点击图片时打开链接
                window.open($(this).find('a').attr('href'));
            });
        });
    </script>
    <!-- 代码 结束 -->
    <!-- Examples body -->
    <div class="clear"></div>
</div>